<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>async与await结合发送AJAX</title>
</head>
<body>
    <button id="btn">sendAJAX</button>
    <button id="btn2">Fetch API</button>
    <button id="btn3">$.ajax</button>
    <script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
    <script>
        //axios
        function sendAJAX(url){
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.responseType = 'json';
                xhr.open("GET", url);
                xhr.send();
                //处理结果
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        //判断成功
                        if(xhr.status >= 200 && xhr.status < 300){
                            //成功的结果
                            resolve(xhr.response);
                        }else{
                            reject(xhr.status);
                        }
                    }
                }
            });
        }

        //段子接口地址 https://api.apiopen.top/getJoke
        let btn = document.querySelector('#btn');


        btn.addEventListener('click',async function(){
            //获取段子信息 自己封装的一个支持Promise的ajax方法
            let duanzi = await sendAJAX('https://api.apiopen.top/getJoke');
            console.log(this.innerHTML, duanzi);
        });

        btn2.addEventListener('click',async function(){
            // 采用fetchApi(Fetch用于在JS脚本里面发出 HTTP 请求, 支持Promise), 
            // XMLHttpRequest 不支持 Promise，如需使用，需要进行封装 比如 axios库
            
            //  fetch() 必须接受一个参数——资源的路径。无论请求成功与否
            //  它都返回一个 Promise 对象，resolve 对应请求的 Response。
            var promise = fetch('https://api.apiopen.top/getJoke')
                            .then(function(response) {
                                return response.json();
                            });
                            
            let duanzi = await promise
            console.log(this.innerHTML, duanzi);
        });

         btn3.addEventListener('click',async function(){
            //获取段子信息 $.ajax 提供了对Promise的支持(then方法)
            let duanzi = await $.ajax('https://api.apiopen.top/getJoke');
            console.log(this.innerHTML, duanzi);
        });
    </script>
</body>
</html>